<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>任务六：通过HTML及CSS模拟报纸排版</title>
    <link rel="stylesheet" href="ife-wei-06.css">
  </head>
  <body>
    <div class="container-big">
      <div class="poster">

        <div class="top">
          <div class="colorblock">
            <p>ife.baidu.com</p>
          </div>
          <p>2016.03</p>
        </div>

        <div class="container-1">
          <div class="word-right">
            <div class="technology">
              <div class="title-technology">about<br />technology</div>
              <p>About technologe about technologe about technologe</p>
            </div>
            <div class="seven-hundred"><p>700</p></div>
            <div class="three-two">
              <p>3.2</p>
            </div>
            <div class="twoline">
              <p><span class="twoline-1">css</span><br />cssssccsccscssc</p>
            </div>
          </div>
          <div class="laptop-1">
            <div class="green"></div>
            <img src="laptop-1.jpg">
            <div class="red"></div>
          </div>
        </div>

        <div class="container-2">
          <div class="card-1">
            <p class="title-what">What</p>
            <p>前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前前端前端前端前端</p>
          </div>
          <div class="card-2">
            <p class="title-when">When</p>
            <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
          </div>
          <div class="card-3">
            <p class="title-how">How</p>
            <p class="text">前端前端前端前端前</p><p class="text">端前端前端前端前端前</p><p class="text">前端前端前端前端前</p>
            <ul class="ullist">
              <li>What-------- <span class="number">40%</span></li>
              <li>What-------- <span class="number">30%</span></li>
              <li>What-------- <span class="number">30%</span></li>
            </ul>
          </div>
        </div>

        <div class="container-bottom">
          <div class="container-3">
            <div class="front-technology">
              <div><span class="THEword">the</span> technologe<br /> of front</div>
              <p class="chinese">前端技术领域</p>
            </div>
            <div class="wordtext">
              <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
              <img src="laptop-3.jpg" class="laptop-3">
              <p>前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
              <p class="indent-two">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
              <p class="indent-two">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
          </div>
          <div class="container-4">
            <div class="laptop-2">
              <img src="laptop-2.jpg">
              <div class="cover">
                <p><span class="whitetext">前端技术</span>前端技术前端技术</p>
              </div>
            </div>
            <div class="lastblock">
              <ul class="ultext">
                <span class="triangle-up"></span><li>前端前端前端前端前端前端前..............<span class="i-small">前端</span></li>
                <span class="triangle-up"></span><li>前端前端前端前端......................<span class="i-small">前端前</span></li>
                <span class="triangle-up"></span><li>前端前端前端前端前端前端前端............<span class="i-small">前端</span></li>
              </ul>
              <div class="redblock">
                <p>0</p>
                <div class="white-line"></div>
                <div class="lasttext-left">
                  <p class="order">ONE TWO<br />THREE FOUR FIVE</p>
                  <p class="hello">hello world hello world<br />hello world</p>
                </div>
              </div>
              <div class="quotation">
                <p>world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
